<template>
  <div class="american-fans">
    <c-title class="circle_title" :text="statistics.diy_name"></c-title>
    <div class="top-pane">
      <div class="top-title" >
        <img :src="statistics.member ? statistics.member.avatar_image : ''" alt="" />
        <div class="right-detail">
          <span class="name">{{statistics.member ? statistics.member.username : ''}}</span>
          <span class="level"><img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/crown.png" alt="" />{{statistics.member ? statistics.member.yz_member.level_name : ''}}<van-icon name="arrow" /></span>
        </div>
      </div>
      <div class="top-amount">
        <div class="cumulative-amount">
          <span class="cumulative-amount-name">累计分红金额</span>
          <span class="cumulative-amount-num">￥{{statistics.total_dividend}}</span>
        </div>
        <div class="cumulative-num">
          <div class="cumulative-num-item">
            <span class="cumulative-num-value">￥{{statistics.prize_pool_amount}}</span>
            <span class="cumulative-num-name">奖金池金额</span>
          </div>
          <div class="cumulative-num-item">
            <span class="cumulative-num-value">￥{{statistics.single_powder}}</span>
            <span class="cumulative-num-name">单个{{statistics.front_diy_name}}价值</span>
          </div>
          <div class="cumulative-num-item">
            <span class="cumulative-num-value">{{statistics.pass_powder_value}}个</span>
            <span class="cumulative-num-name">总合格{{statistics.front_diy_name}}</span>
          </div>
          <div class="cumulative-num-item">
            <span class="cumulative-num-value">{{statistics.powder_member}}个</span>
            <span class="cumulative-num-name">总{{statistics.front_diy_name}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="activity-time">活动时间:<span v-if="statistics.start_time" class="time-line">{{statistics.start_time}}至{{statistics.end_time}}</span><span v-if="!statistics.start_time" class="time-line"> 暂无</span></div>
    <div>
      <van-tabs v-model:active="active" type="card" class="tabs-style" @change="changeTabs" color="#f14e4e">
        <van-tab title="PK排行榜">
          <d-list :loading="loading" :finished="finished" @load="onLoad" v-show="active == 0">
            <div class="pane-box-ranking">
              <div class="pane-tab" v-for="(item, index) in americanFans" :key="index">
                <div class="pane-top-item">
                  <span :class="index == 0 ? 'pane-top-ranking ranking-active' : 'pane-top-ranking'">
                    <span v-show="item.ranks !== 1 && item.ranks !== 2 && item.ranks !== 3" class="ranks-name">{{ item.ranks }}</span>
                    <img v-show="item.ranks == 1 || item.ranks == 2 || item.ranks == 3" :src="rankingList[item.ranks - 1]" alt="" />
                  </span>
                  <div class="pane-top-detail">
                    <img :src="item.member ? item.member.avatar_image : ''" alt="" />
                    <span class="pane-top-myself"><span class="name">{{item.member ? item.member.username : ''}}</span><span class="myself" v-show="current_member && index == 0">(自己)</span></span>
                  </div>
                </div>
                <div class="pane-top-line"><span class="line"></span></div>
                <div class="pane-bottom-item">
                  <div class="list-item">
                    <div class="list-num">{{item.pass_powder}}个</div>
                    <div class="list-name">合格{{statistics.front_diy_name}}</div>
                  </div>
                  <div class="list-item">
                    <div class="list-num">{{item.total_powder_member}}个</div>
                    <div class="list-name">总{{statistics.front_diy_name}}</div>
                  </div>
                  <div class="list-item">
                    <div class="list-num">￥{{item.dividend_plan}}</div>
                    <div class="list-name">预计分红</div>
                  </div>
                  <div class="list-item">
                    <div class="list-num">{{item.formula}}</div>
                    <div class="list-name">计算公式</div>
                  </div>
                </div>
              </div>
            </div>
          </d-list>
        </van-tab>
        <van-tab title="分红明细">
          <d-list :loading="loading" :finished="finished" @load="onLoad" v-show="active == 1">
            <div class="pane-box-detailed" v-for="(item, index) in americanFans" :key="index">
              <div class="pane-tab">
                <div class="top-item">
                  <span class="dividend-id">分红ID: {{item.id}}</span>
                  <span class="dividend-money">￥{{item.profit}}</span>
                </div>
                <div class="bottom-tab">
                  <span class="dividend-date">时间: {{item.created_at}}</span>
                  <span class="dividend-num">分红合格{{statistics.front_diy_name}}: {{item.pass_powder}}个</span>
                </div>
              </div>
            </div>
          </d-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import index from "./index";

export default index;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.ranking-active {
  font-size: 0.81rem;
  font-weight: bold;
  font-stretch: normal;
  line-height: 1.25rem;
  color: #f14e4e;
}

.top-pane {
  background: linear-gradient(to bottom, #f15353, white);

  .top-title {
    padding: 1.28rem 0 1.5rem 0.97rem;
    // background: linear-gradient(180deg, #f15353, #f06464, #f06464, #f7f8fb);
    display: flex;

    img {
      height: 3.44rem;
      width: 3.44rem;
      border-radius: 50%;
      margin: 0;
    }

    .right-detail {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      margin-left: 0.44rem;

      img {
        width: 1.03rem;
        height: 0.94rem;
        margin-right: 0.22rem;
      }

      .name {
        color: white;
        font-size: 1rem;
      }

      .level {
        background-color: #a36705;
        border-radius: 0.63rem;
        padding: 0.28rem 0.34rem 0.28rem 0.25rem;
        color: rgba(255, 255, 255, 0.5);
        line-height: 1;
        display: flex;
        align-items: center;
      }
    }
  }

  .top-amount {
    margin: 0 0.63rem;
    padding: 0.78rem 0.84rem 0 0.84rem;
    background: white;
    border-radius: 0.31rem;

    .cumulative-amount {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0.81rem;
      border-bottom: 0.03rem solid #f1f1f1;

      .cumulative-amount-name {
        font-weight: bold;
        font-stretch: normal;
        line-height: 1.25rem;
        color: #282828;
        font-size: 0.81rem;
      }

      .cumulative-amount-num {
        font-size: 0.81rem;
        font-weight: bold;
        font-stretch: normal;
        line-height: 1.25rem;
        color: #f14e4e;
      }
    }

    .cumulative-num {
      display: flex;
      flex-wrap: wrap;

      .cumulative-num-item {
        display: flex;
        flex-direction: column;
        width: 50%;
        margin: 1.09rem 0 1.09rem 0;

        .cumulative-num-value {
          font-size: 0.81rem;
          font-weight: bold;
          font-stretch: normal;
          line-height: 1;
          color: #f14e4e;
        }

        .cumulative-num-name {
          margin-top: 0.66rem;
          font-size: 0.69rem;
          font-weight: bold;
          font-stretch: normal;
          line-height: 1;
          color: #696969;
        }
      }
    }
  }
}

.activity-time {
  display: flex;
  margin: 0.69rem 0.63rem 1.34rem 0.63rem;
  font-size: 0.69rem;
  font-weight: bold;
  font-stretch: normal;
  line-height: 1.25rem;
  color: #696969;

  .time-line {
    margin-left: 5px;
  }
}

.pane-box-ranking {
  margin-top: 0.88rem;

  .pane-tab {
    margin: 0 0 0.63rem 0;
    background: white;
    border-radius: 0.31rem;

    .pane-top-item {
      display: flex;
      margin-left: 1.13rem;
      padding-top: 0.53rem;
      justify-content: space-between;
      padding-bottom: 0.69rem;
      align-items: center;

      .pane-top-ranking {
        display: flex;
        align-items: center;

        .ranks-name {
          font-size: 0.81rem;
          font-weight: bold;
          font-stretch: normal;
          color: #333;
        }

        img {
          width: 1.06rem;
          height: 1.41rem;
        }
      }

      .pane-top-detail {
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 1.25rem;
          height: 1.25rem;
          background-color: #b7b7b7;
          border-radius: 50%;
        }

        .pane-top-myself {
          .name {
            margin: 0 1.09rem 0 0.31rem;
            font-size: 0.75rem;
            font-weight: bold;
            font-stretch: normal;
            line-height: 1.25rem;
            color: #525252;
          }

          .myself {
            font-size: 0.75rem;
            font-weight: bold;
            font-stretch: normal;
            line-height: 1.25rem;
            color: #ff9000;
            margin-right: 0.84rem;
          }
        }
      }
    }

    .pane-top-line {
      display: flex;
      justify-content: center;

      .line {
        width: 93%;
        height: 0.03rem;
        background-color: #f1f1f1;
        display: block;
      }
    }

    .pane-bottom-item {
      display: flex;
      justify-content: space-between;
      margin: 0 0.34rem 0 1.06rem;

      .list-item {
        padding: 1.16rem 0 0.91rem 0;

        .list-num {
          font-size: 0.75rem;
          font-weight: bold;
          font-stretch: normal;
          line-height: 1.25rem;
          color: #f14e4e;
        }

        .list-name {
          font-size: 0.69rem;
          font-weight: bold;
          font-stretch: normal;
          line-height: 1.25rem;
          color: #696969;
        }
      }
    }
  }
}

.pane-box-detailed {
  margin-top: 0.88rem;

  .pane-tab {
    margin: 0 0 0.63rem 0;
    background: white;
    border-radius: 0.31rem;
    display: flex;
    padding: 0.91rem 0.5rem 0.91rem 0.78rem;
    flex-direction: column;
    align-items: flex-start;

    .top-item {
      display: flex;
      width: 100%;
      justify-content: space-between;

      .dividend-id {
        font-size: 0.81rem;
        font-weight: bold;
        font-stretch: normal;
        line-height: 1.25rem;
        color: #2b2b2b;
        line-height: 1;
      }

      .dividend-money {
        font-size: 0.81rem;
        font-weight: bold;
        font-stretch: normal;
        line-height: 1.25rem;
        color: #f14e4e;
        line-height: 1;
      }
    }

    .bottom-tab {
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-size: 0.69rem;
      font-weight: bold;
      font-stretch: normal;
      color: #696969;
      margin-top: 0.88rem;

      .dividend-date {
        line-height: 1;
        font-size: 0.69rem;
        font-weight: bold;
        font-stretch: normal;
        color: #696969;
      }

      .dividend-num {
        line-height: 1;
        font-size: 0.69rem;
        font-weight: bold;
        font-stretch: normal;
        color: #696969;
      }
    }
  }
}

.tabs-style {
  ::v-deep .van-tabs__wrap {
    display: flex;
    justify-content: center;
  }

  ::v-deep .van-tabs__nav--card {
    width: 16rem;
  }
}
</style>
